<template>
    <main-wrap class="mytab">
      <!-- <form-error :feshow="ferror" :stext="ferrtext" :ctype="ferrtype"></form-error> -->
      <div class="my-toptips" :class="ferrtype === 0 ? 'weui-toptips_warn' : 'weui-toptips_normal'">{{ferrtext}}</div>

      <van-tabs swipeable>
        <van-tab class="" v-for="(day, di) in datetimes" :key="di" :title="day.week + '\n' + day.date">
          <div class="weui-cells weui-cells_checkbox">
            <label v-for="(item, ti) in day.times" :key="ti" class="weui-cell weui-check__label" :class="{'weui-check-disabled': item.disable}" :for="'s' + di + ti">
              <div class="weui-cell__hd">
                <input type="checkbox" class="weui-check" name="checkbox1" :id="'s' + di + ti" v-model="item.chck" :disabled="item.disable" @click="seltime(item.text, di, ti)">
                <i class="weui-icon-checked"></i>
              </div>
              <div class="weui-cell__bd">
                <p :class="{'lightgray': item.disable}">{{item.text}}</p>
              </div>
            </label>
          </div>
        </van-tab>
      </van-tabs>

      <div class="paddingP3 mtp4">
        <a href="javascript:;" class="weui-btn weui-btn_primary" :class="{'weui-btn_disabled': btnDisabled}" @click="gonext">确定</a>
      </div>
    </main-wrap>
</template>

<script>
import MainWrap from '@/components/mainWrap'
// import FormError from '@/components/formerror'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'AppointTime',
  data () {
    return {
      datetimes: [],
      // ferror: false,
      ferrtext: '请选择',
      ferrtype: 1,
      // ferr: '',
      allownum: localStorage.principalUID === '' ? 3 : 1,
      selnum: 0,
      selarr: [],
      btnDisabled: true
    }
  },
  watch: {
    selnum () {
      if (this.selnum === this.allownum) {
        this.btnDisabled = false
      } else {
        this.btnDisabled = true
      }
      this.showTips()
    }
  },
  components: {
    MainWrap
  },
  computed: {
    ...mapState(['holidays', 'user_report_select_times'])
  },
  mounted () {
    this.cm.overscroll(document.querySelector('.mytab'))
    this.dataInit()
    this.getDateTimes()
  },
  updated () {
    this.$nextTick(() => {
      for (let i = 0; i < document.getElementsByClassName('van-ellipsis').length; i++) {
        let dom = document.getElementsByClassName('van-ellipsis')[i]
        dom.innerHTML = dom.innerHTML.trim()
      }
    })
  },
  methods: {
    ...mapMutations(['empty_user_report_select_times', 'add_user_report_select_times']),
    getDateTimes () {
      var curday = new Date()
      var nowhour = this.cm.dealnum(curday.getHours())
      var countdays = 5

      for (let i = 0; i < countdays; i++) {
        let week = curday.getDay()
        let year = curday.getFullYear()
        let month = this.cm.dealnum(curday.getMonth() + 1)
        let daynum = curday.getDate()
        let daystr = this.cm.dealnum(daynum)

        let continueouter = false
        if (i === 0) { // 现在已超过可选择的时间段：跳过
          if (localStorage.principalUID === '' && nowhour > '16') continueouter = true
          else if (localStorage.principalUID !== '' && nowhour > '22') continueouter = true
        }

        if (!continueouter && localStorage.principalUID === '') { // 未指定负责人的时候需要跳过节假日&周六日
          // if (week === 0 || week === 6) { // 周六日：跳过
          //   continueouter = true
          // }

          // if (!continueouter) {
          let curdaystr = year + '-' + month + '-' + daystr
          for (let j = 0; j < this.holidays.length; j++) {
            if (this.holidays[j].day === curdaystr) { // 节假日：跳过
              continueouter = true
              break // break holidays check
            }
          }
          // }
        }

        if (continueouter) {
          nowhour = '0'
          curday.setDate(daynum + 1)
          countdays++
          continue
        }

        var timesarr = []
        // for (var j = 8; j < 22; j = j + 2) {
        //   var dis = false // 是否不可选择
        //   if ((j + 2) <= nowhour && i === 0) dis = true

        //   timesarr.push({
        //     text: this.cm.dealnum(j) + ':00 - ' + this.cm.dealnum(j + 2) + ':00',
        //     disable: dis,
        //     chck: false
        //   })
        // }
        let temp = []
        if (localStorage.principalUID === '') {
          temp = ['08:30 - 09:30', '09:30 - 10:30', '10:30 - 12:00', '14:00 - 15:00', '15:00 - 16:00', '16:00 - 17:30']
        } else {
          temp = ['00:00 - 02:00', '02:00 - 04:00', '04:00 - 06:00', '06:00 - 08:00', '08:00 - 10:00', '10:00 - 12:00', '12:00 - 14:00', '14:00 - 16:00', '16:00 - 18:00', '18:00 - 20:00', '20:00 - 22:00', '22:00 - 00:00']
        }

        let datestr = month + '月' + daystr + '日'
        let vm = this
        temp.forEach(function (item, index) {
          var dis = false
          if (nowhour > item && i === 0) {
            dis = true
          }

          var chck = false
          if (vm.selarr[item] && vm.selarr[item] === datestr) {
            chck = true
            vm.selnum++
          }
          timesarr.push({
            text: item,
            disable: dis,
            chck: chck
          })
        })

        this.datetimes.push({
          week: '周' + this.cm.getweekstr(week),
          date: datestr,
          times: timesarr
        })

        curday.setDate(daynum + 1)
      }
    },
    seltime (time, di, ti) {
      this.$nextTick(() => {
        // 取消选中
        if (!this.datetimes[di].times[ti].chck) {
          this.selnum--
          this.showTips()
        } else { // 选中
          if (this.selnum >= this.allownum) { // 已经够3个了
            // this.ferror = true
            this.ferrtype = 0
            this.ferrtext = '最多只能选 ' + this.allownum + ' 个时间段'

            // clearTimeout(this.ferr)
            // this.ferr = setTimeout(() => {
            //   this.ferror = false
            // }, 2000)

            var newobj = {
              text: time,
              disable: false,
              chck: false
            }
            this.$set(this.datetimes[di].times, ti, newobj)
          } else {
            this.selnum++
            this.showTips()
          }
        }
      })
    },
    showTips () {
      if (this.selnum < this.allownum) {
        this.ferrtext = '已选 ' + this.selnum + ' 个，剩余 ' + (this.allownum - this.selnum) + '个'
      } else if (this.selnum >= this.allownum) {
        this.ferrtext = '已选 ' + this.selnum + ' 个，完成'
      }
      this.ferrtype = 1
      // this.ferror = true
      // clearTimeout(this.ferr)
      // this.ferr = setTimeout(() => {
      //   this.ferror = false
      // }, 2000)
    },
    gonext () {
      if (!this.btnDisabled) {
        // this.$toast.loading({
        //   duration: 0,
        //   message: '请稍等...'
        // })

        this.empty_user_report_select_times()
        for (let i = 0; i < this.datetimes.length; i++) {
          for (let j = 0; j < this.datetimes[i].times.length; j++) {
            if (this.datetimes[i].times[j].chck) {
              this.add_user_report_select_times(this.datetimes[i].date + ' ' + this.datetimes[i].times[j].text)
            }
          }
        }
        this.$router.push('/reportinfo/' + localStorage.reporttype)

        // setTimeout(() => {
        //   this.$toast.clear()
        //   this.$router.push('/reportinfo/' + localStorage.reporttype)
        // }, 2000)
      }
    },
    dataInit () {
      for (let i = 0; i < this.user_report_select_times.length; i++) {
        const ele = this.user_report_select_times[i]
        let day = ele.substring(0, 6)
        let time = ele.substring(7)
        this.selarr[time] = day
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.mytab >>> .van-tabs__wrap
  border-bottom 1px solid #d4d4d4
.mytab >>> .van-tabs__nav--line
  padding-bottom 0
.mytab >>> .van-tabs__line
  background-color #0082ef
  bottom 0
.mytab >>> .van-tab--active
  color #0082ef
.mytab >>> .van-tab
  padding-top 8px
  line-height 16px
  font-size 11px
  flex 0 0 20%
.mytab >>> .van-ellipsis
  white-space pre-wrap

.my-toptips
  padding: 5px;
  font-size: 14px;
  text-align: center;
  color: white
  word-wrap: break-word;
  word-break: break-all;
  &.weui-toptips_normal
    background-color:#2F7DCD;

.weui-check-disabled:active
  background: white
</style>
